<template>
	<view class="relative" style="position: relative;">
		<view class="diamondMall_head ptb20 pl-20 pr-10 flex-between flex" :style="[{ background: bg_color},{paddingTop:blindBoxheight+'rpx'}]">
			<view class="">
				<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
					@click="backmarket()"></image>
			</view>
			<view @click="toRule" class="flex white plr-20" style="background-color: #F6D963;height: 60rpx;line-height: 60rpx;border-radius: 30rpx 0 0rpx 30rpx;margin-right: -10rpx;">
				<view class="plr-10">积分规则</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- <view class="size-30 center" :style="{opacity:textcolor}" style="margin: 0 280rpx 0 0;">
				{{title}}
			</view> -->
		</view>
		<view class="">
			<image class="bg-img" src='../../static/home/raffle_bg1.png' mode=""></image>
		</view>
		<view class="" style="height: 280rpx;">

		</view>
		<view class="rafflePage_change_title">
			剩余积分：{{integral}}
		</view>
		<view class="lucky-draw" :style="scale">
			<image class="lucky-draw__bg" src='../../static/home/raffle_1.png' mode="widthFix" style="width: 750rpx;">
			</image>

			<view class="lucky-draw__objects" :style="rotateStyle">
				<image src="../../static/home/raffle_center.png" class="lucky-draw__objects__bg"></image>
				<view class=" lucky-draw__objects__object" v-for="(item, index) in dataA" :key="index" :style="{
          transform: `translate(-50%) rotate(${(360 / 6) * index}deg)`,
        }">
					<view class="lucky-draw__objects__object__title ">{{ item.name }}</view>
					<image class="lucky-draw__objects__object__icon" mode="widthFix" :src="item.image"></image>
				</view>
			</view>
			<image class="lucky-draw__start" src="../../static/home/raffleButton.png" @click="starta()"></image>
		</view>
		
		<u-popup  v-model="show" mode="center" :closeable="true" border-radius="14" length="80%" height="300rpx">
			<view class="custom-style">
				<view class="center white">选择抽奖次数</view>
				<view class="flex choujiang">
					<view class="drawBtn" style="background-color: #fff !important;" @click="drawCilck(1)">抽1次</view>
					<view class="drawBtn" style="background-image: linear-gradient(to right, #FBEC81, #FFD55B);"  @click="drawCilck(5)">抽5次</view>
				</view>
				<view class="flex white">
					<view class="consume">消耗{{price}}积分</view>
					<view class="consume">消耗{{price*5}}积分</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="isshow" mode="center" border-radius="20" length="60%" height="640rpx">
			<view class="drawPop">
					<view class="drawPopTop">
						<view class="prizeTitle" v-if="isthanks==false">恭喜你抽中</view>
						<view class="prizeTitle" v-if="isthanks==true">感谢参与</view>
						<view class="" style="display: flex;flex-wrap: wrap;justify-content: space-around;">
							<view class="" v-for="item in prizeList" class="prizeItem" :style="Activewidth">
								<view class="mtb-30">{{item.goods_name}}</view>
								<view class="prizeImg">
									<image style="width: 100%;" :src="item.image" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="drawPopBottom">
						<view class="white" v-if="isthanks==false">奖品已进入您的账户中</view>
						<view class="flex mt-20">
							<view class="confirmBtn" @click="isshow=false">确定</view>
							<view class="redrawBtn" @click="onceDraw">再抽一次</view>
						</view>
					</view>
			</view>
		</u-popup>
		
		
		<view class="flex1 flex-between mt-40">
			<view class="" style="width: 260rpx;height: 20rpx;">
				<image class="photo" src="../../static/home/left.png" mode=""></image>
			</view>
			<view class="white">
				抽奖记录
			</view>
			<view class="" style="width: 260rpx;height: 20rpx;">
				<image class="photo" src="../../static/home/right.png" mode=""></image>
			</view>
		</view>
		<view class="white p20 size-28" style="background-color: #632FB5;">
			<view class="flex">
				<view class="center" style="width: 320rpx;">抽奖时间</view>
				<view class=""></view>
				<view class="center" style="width: 40%;">抽奖结果</view>
			</view>
			<view class="">
				<view class="RecordListItem flex" v-for="item in RaffleRecordList">
					<view class="center" style="width: 320rpx;">{{item.create_time}}</view>
					<view class="">获得了</view>
					<view class="center" style="width: 40%;">{{item.goods_name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalData
	} from "@/App.vue"
	export default {
		name: "lucky-draw",
		data() {
			return {
				blindBoxheight: '',
				create_time: '',
				e_date: "",
				count: '',
				title: '',
				textcolor: '0',
				bg_color: '',
				dataA: [],
				isStart: true, //为了不连续点击
				rotateAngle: 0, // 旋转角度
				cycle: 1, // 第几次抽奖
				raffle_id:'',
				show: false,
				isshow:false,
				prizeList:[],
				RaffleRecordList:'',
				integral:'',
				Activewidth:'',
				page: 1,
				listLength:'',
				isthanks:false
			};
		},
		computed: {
			rotateStyle() {
				return `
        -webkit-transition: transform ${this.duration}ms ${this.mode};
        transition: transform ${this.duration}ms ${this.mode};
        -webkit-transform: rotate(${this.rotateAngle}deg);
            transform: rotate(${this.rotateAngle}deg);`;
			},
			scale() {
				return `transform: scale(${this.size / 686})`;
			},
		},
		props: {
			duration: {
				// 总旋转时间 ms级
				type: Number,
				default: 5000,
			},
			circle: {
				// 旋转圈数
				type: Number,
				default: 5,
			},
			mode: {
				// 由快到慢 惯性效果都省了
				type: String,
				default: "cubic-bezier(0.2, 0, 0, 1)",
			},
			size: {
				type: Number,
				default: 686,
			},
			config: {
				type: Object,
				default: () => ({}),
			},
			type: {
				type: Number,
				default: 0,
			},
		},
		onReachBottom(e) {
		},
		created() {

		},
		mounted() {
			uni.$on('自定义名字',()=>{
				
							this.page++
							this.userRaffleRecordList()
							
			})   
			this.$http('api/activity/detail', {
				id: 2
			}).then(res => {
				console.log(res);
				this.title = res.title
				this.count = res.count
				this.create_time = res.create_time
				this.e_date = res.e_date
				this.thumb = res.thumb

			});
			
			this.$http('api/user/userInfo').then(res => {
				console.log(res)
				this.integral=res.integral
			});
			// this.$http('api/activity/drawList', {}).then(res => {
			// 	console.log(res);
			// 	this.dataA = res

			// });
			this.$http('api/Integral/index', {}).then(res => {
				this.price=res.data[0].price
				// console.log(res.data[0].raffle_id);
				// this.dataA = res,
				this.raffle_id=res.data[0].raffle_id
				console.log(this.raffle_id)
				this.$http('api/Integral/raffleDetail', {
					// box_id:this.raffle_id
					box_id:58
				},'POST').then(res => {
					console.log(res.goodslist);
					console.log(res.goodslist.slice(0,6))
					// this.dataA = res,
					this.dataA = res.goodslist.slice(0,6)
				});
			});
			
			this.userRaffleRecordList()
		},
		
		
		onLoad() {
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
			
		},
		onShow() {
			
		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		methods: {
			toRule(){
				uni.navigateTo({
					url:'../../pages/home/ruleInfo'
				})
			},
			userRaffleRecordList(){
				this.$http('api/Integral/userRaffleRecordList', {
					raffle_id: this.raffle_id,
					page: this.page
				}, 'POST').then(res => {
					console.log()
					this.RaffleRecordList=res
					this.listLength=this.RaffleRecordList.length
					console.log(this.listLength)
					
					// this.prizeItem.
				});
			},
			
			onceDraw(){
				this.isshow=false
				this.drawCilck(1)
			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			drawCilck(i){
				this.show=false
				this.$http('api/Integral/createOrder', {
					box_id:58,
					num:i
				}, 'POST').then(res => {		
					this.$http('api/Integral/payOrder', {
						order_id:res.order_id
					}, 'POST').then(res => {
						console.log(res.prize)
						this.prizeList=res.prize
						console.log(this.prizeList.length)
						this.isthanks=false
						if(this.prizeList.length==1){
							for(let i=0;i<this.prizeList.length;i++){
								if(this.prizeList[i].goods_id==0){
									this.isthanks=true
								}
							}
						}else{
							// for(let i=0;i<this.prizeList.length;i++){
							// 	if(this.prizeList[0].goods_id==0 && this.prizeList[1].goods_id==0 && this.prizeList[2].goods_id==0 && this.prizeList[3].goods_id==0 && this.prizeList[4].goods_id==0){
							// 		this.isthanks=true
							// 	}
							// }
						}
						
						
						
						console.log(res.prize.length)
						if(res.prize.length==1){
							this.Activewidth= {
								'width': '100%',
							}
						}else{
							console.log('多个')
							this.Activewidth= {
								'width': '30%',
							}
						}
						
						if (this.isStart) {
							this.isStart = false;
						this.rotateAngle = this.circle * 360 * this.cycle - (360 / 6 + (this.dataA.findIndex((item) => item.id == res.prize[0].goods_id) - 1) * (360 / 6))
							this.cycle++;
							setTimeout(() => {
								this.isshow=true
								this.$http('api/user/userInfo').then(res => {
									console.log(res)
									this.integral=res.integral
								});
								
								
								// this.dataA.forEach((item) => {
								// 	if (item.goods_id == goods_id) {
								// 		// uni.showToast({
								// 		// 	title: '恭喜您获得' + item.name,
								// 		// 	icon: "none"
								// 		// })
										this.isStart = true;
										this.$emit("finish"); //向父组件发送结束事件
								// 	}
								// })
							}, 6000)
								this.count--
						}
						
					});
					
					
				
				});
			},
			starta() {
				this.show = true
				// this.$http('api/activity/draw', {}, 'POST').then(res => {
				// 	this.listofwinners = res
				// 	this.ida = this.listofwinners.id
				// 	console.log(this.listofwinners);
				// 	this.name = this.listofwinners.name
				// 	var goods_id = this.listofwinners.goods_id
				// 	console.log(goods_id);
				// 	if (this.isStart) {
				// 		this.isStart = false;
				// 		this.rotateAngle = this.circle * 360 * this.cycle - (360 / 6 + (this.dataA.findIndex((
				// 			item) => item
				// 			.goods_id == goods_id) - 1) * (360 / 6))
				// 		this.cycle++;
				// 		setTimeout(() => {
				// 			this.dataA.forEach((item) => {
				// 				if (item.goods_id == goods_id) {
				// 					uni.showToast({
				// 						title: '恭喜您获得' + item.name,
				// 						icon: "none"
				// 					})
				// 					this.isStart = true;
				// 					this.$emit("finish"); //向父组件发送结束事件
				// 				}
				// 			})
				// 		}, 6000)
				// 			this.count--
				// 	}
				// });
			},
		},
	};
</script>
<style scoped lang="scss">
	::v-deep  .lucky-draw__objects__object__title {
		text-align: center;
	}
	.RecordListItem{
		border-bottom: 1rpx dashed #fff;
		padding: 20rpx 0;
		box-sizing: border-box;
	}
	.prizeItem{
	}
	.custom-style{
		height: 100%;
		background-image: linear-gradient(to bottom, #A023C4, #7208B0);
		padding: 40rpx;
		box-sizing: border-box;
	}
	.drawPop{
		width: 100%;
		height: 100%;
		background: url(../../static/home/drawPop.png) 0 0 no-repeat;
		background-size: 100% 100%;
		padding: 46rpx 26rpx;
		.drawPopTop{
			text-align: center;
			.prizeTitle{
				color: #9C21C2;
				font-size: 20px;
				font-weight: bold;
			}
			.prizeImg{
		    width: 60%;
		    margin: 0 auto;
		    // height: 120px;
		    // background: #E8E8E8;
		    border-radius: 10px;
			}
		}
		.drawPopBottom{
			// margin-top: 60rpx;
			width: 80%;
			text-align: center;
			position: absolute;
			left: 10%;
			bottom: 36rpx;
			.confirmBtn{
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background-color: #fff;
			}
			.redrawBtn{
				width: 45%;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background-image: linear-gradient(to right, #FBEC81, #FFD55B);
			}
		}
	}
	.choujiang{
		margin-top: 50rpx;
		.drawBtn{
			width: 45%;
			height: 80rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			
		}
		
	}
	.consume{
		width: 45%;
		text-align: center;
		margin-top: 30rpx;
	}
	.lucky-draw__start {
		top: 250rpx !important;
	}

	.lucky-draw__objects__object__icon {
		width: 90rpx !important;
		height: 60rpx !important;
		display: block !important;
		margin: 14rpx auto 0 !important;
	}

	.lucky-draw__objects__object {
		transform-origin: 50% 328rpx !important;
	}

	.lucky-draw__objects__bg {
		position: absolute;
		width: 650rpx !important;
		height: 650rpx !important;
	}

	.lucky-draw__objects {
		position: absolute;
		top: 14rpx !important;
		left: 44rpx !important;
		right: 62rpx !important;
		bottom: 150rpx !important;
		width: 650rpx !important;
		height: 650rpx !important;
	}

	.rafflePage_change_title {
		margin: 40rpx auto;
		z-index: 111;
		color: #FFF;
		background-image: linear-gradient(to right, #F337FD, #6305A7);
		width: 420rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 60rpx;
		border: 6rpx solid #A945E3;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 1600rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}

	.lucky-draw__bg {
		width: 740rpx !important;
		height: 900rpx !important;

	}

	.lucky-draw__objects__object__title {
		font-size: 38rpx !important;
		color: #000 !important;
	}

	.lucky-draw {
		position: relative;
		width: fit-content;
		margin: 40rpx auto;


		&__bg {
			width: 686rpx;
			display: block;
		}

		&__lights {
			position: absolute !important;
			width: 676rpx;
			left: 6rpx;
			top: 10rpx;
			display: block;
			animation: infinite 1s alternate lights steps(1, end);
		}

		&__objects {
			position: absolute;
			top: 49rpx;
			left: 135rpx;
			right: 63rpx;
			bottom: 78rpx;
			width: 500rpx;
			height: 500rpx;

			&__bg {
				position: absolute;
				width: 500rpx;
				height: 500rpx;
			}

			&__object {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
				transform-origin: 50% 250rpx;

				&__title {
					margin-top: 62rpx;
					color: #4E0691;
					font-size: 20rpx;
					-webkit-transform: scale(0.7);
				}

				&__icon {
					width: 52rpx;
					height: 52rpx;
					display: block;
					margin: 18rpx auto 0;
				}
			}
		}

		&__start {
			width: 150rpx;
			height: 170rpx;
			display: block;
			position: absolute;
			left: 300rpx;
			top: 202rpx;
		}
	}

	@keyframes lights {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(15deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>
